<template>
  <div>
    <h1 style="color: cadetblue;">欢迎尊贵的会员:{{ user.nickname }}</h1>
    <h1 style="color: cadetblue;">邮箱:{{ user.email }}</h1>
    <h1 style="color: cadetblue;">剩余Token:{{ user.token }} </h1>
    <el-button type="primary" @click="changeNickName = true">修改用户名</el-button>
    <el-button type="primary" @click="changePassword = true">修改密码</el-button>

  </div>

  <el-dialog @close="closeNameForm" v-model="changeNickName" title="用户名修改" width="400">
    <el-form ref="changeNickNameRef" :rules="changeNickNameRules" :model="changeNickNameForm">
      <el-form-item label="用户名修改" prop="nickname">
        <!-- 去除两边空白 -->
        <el-input v-model.trim="changeNickNameForm.nickname" autocomplete="off" placeholder="请输入新的用户名" maxlength="10"
          show-word-limit type="textarea" resize="none" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="changeNickName = false"> 取消 </el-button>
        <el-button type="primary" @click="submitEditUsername(changeNickNameRef)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>


  <!-- 密码 -->
  <el-dialog @close="closePasswordForm" v-model="changePassword" title="密码修改" width="400">
    <el-form ref="changePasswdRef" :rules="changePsRules" :model="changePsForm">
      <el-form-item label="原密码" prop="prePassword1">
        <!-- 去除两边空白 -->
        <el-input v-model.trim="changePsForm.prePassword1" autocomplete="off" placeholder="请输入原密码" maxlength="16"
          show-word-limit type="password" resize="none" />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword1">
        <el-input v-model.trim="changePsForm.newPassword1" autocomplete="off" placeholder="请输入新密码" maxlength="16"
          show-word-limit type="password" resize="none" />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword2">
        <el-input v-model.trim="changePsForm.newPassword2" autocomplete="off" placeholder="请再次输入新密码" maxlength="16"
          show-word-limit type="password" resize="none" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="changePassword = false"> 取消 </el-button>
        <el-button type="primary" @click="submitEditPassword(changePasswdRef)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>


<script lang="ts" setup>
import { editUserPassword, query, editUserNickName } from '@/api/user';
import { ref, reactive } from "vue";
import { onMounted } from 'vue';
import { useTokenStore } from '@/stores/user'

import {
  FormInstance,
  FormRules,
} from "element-plus";

const user = reactive({
  nickname: "",
  email: "",
  token: 0
})

const store = useTokenStore();

const init_in = () => query().then(res => {
  console.log(res)
  user.nickname = res.data.nickname
  store.nickname = res.data.nickname;

  user.email = res.data.email
  user.token = res.data.token
})




/**
* 用户名
*/

//弹出框
//关闭对话框时清理输入内容
const closeNameForm = () => {
  changeNickNameForm.nickname = ""
}


//新增话题对话框
const changeNickNameRef = ref<FormInstance>();
let changeNickName = ref(false);
let changeNickNameForm = reactive({
  nickname: ""
});


const validateNickname = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入修改后账号名称"));
  } else {
    callback();
  }
};

const changeNickNameRules = reactive<FormRules<typeof changeNickNameForm>>({
  nickname: [{ validator: validateNickname, trigger: "blur" }],
});


const submitEditUsername = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      editUserNickName(changeNickNameForm.nickname);
      changeNickName.value = false;
      window.location.assign(window.location.href);

    } else {
      console.log("error submit!");
    }
  });
};




/**
* 密码
*/
;
//新增话题对话框
const changePasswdRef = ref<FormInstance>();
let changePassword = ref(false);
let changePsForm = reactive({
  prePassword1: "",
  newPassword1: "",
  newPassword2: ""
});


const closePasswordForm = () => {
  changePsForm.prePassword1 = "";
  changePsForm.newPassword1 = "";
  changePsForm.newPassword2 = "";

};

const validatePs1 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("原密码不能为空"));
  }
  else if (value.length < 3) {
    callback(new Error("密码至少3位"));
  }
  else {
    callback();
  }
};

const validateNewPs1 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("新密码不能为空"));
  }
  else if (value.length < 3) {
    callback(new Error("密码至少3位"));
  }
  else {
    callback();
  }
};

const validateNewPs2 = (rule: any, value: any, callback: any) => {
  if (value != changePsForm.newPassword1) {
    callback(new Error("两次输入密码不一致"));
  }
  else if (value.length < 3) {
    callback(new Error("密码至少3位"));
  }
  else {
    callback();
  }
};

const changePsRules = reactive<FormRules<typeof changePsForm>>({
  prePassword1: [{ validator: validatePs1, trigger: "blur" }],
  newPassword1: [{ validator: validateNewPs1, trigger: "blur" }],
  newPassword2: [{ validator: validateNewPs2, trigger: "blur" }],
});

const submitEditPassword = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log(changePsForm.prePassword1);
      editUserPassword(changePsForm.prePassword1, changePsForm.newPassword2)
        .then(res => {
          changePassword.value = false;
          window.location.assign(window.location.href);

        }).catch(errorMessages => {
          alert(errorMessages)
        });


    } else {
      console.log("error submit!");
    }
  });
};


onMounted(() => {
  init_in();
});

</script>

<style scoped>
.user-info {
  background-color: #f5f5f5;
  padding: 20px;
  margin-bottom: 20px;
}

.nickname,
.email,
.token {
  color: #333;
  font-size: 16px;
  text-align: left;
  text-indent: 20px;
  margin-bottom: 10px;
}

.edit-btn {
  margin-top: 20px;
}
</style>